<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--引入head的公共部分-->
<head th:replace="header::header-commo(商品详情)"></head>
<body>
<!--引入header的公共部分-->
<header th:replace="header::header-nav"></header>
<!--主区域-->
<div class="container" style="margin-top: 10px;">
    <div class="row">
        <div class="col-md-12 col-xs-12">
            <div class="row" style="margin-bottom: 10px;">
                <div class="col-md-5 col-xs-5">
                    <div>
                        <a href="#"><img class="img-responsive" th:src="@{'/upload/'+${item.image}}" src="img/goods1.jpg"/></a>
                    </div>
                </div>
                <div class="col-md-7 col-xs-7 product-info">
                    <div>
                        <h3 class="pord-name" th:text="${item.name}">布隆雕塑</h3>
                    </div>
                    <div class="pord-price clearfix">
                        <span class="pord-dispri">￥<strong th:text="${item.shopPrice}">98.00</strong></span>
                        <span class="pord-orpri" th:text="'￥'+${item.marketPrice}">￥98.00</span>
                    </div>
                    <!--<div class="pord-detailbox clearfix">
                        <div class="pull-left pord-sold">已售：<span>1448</span></div>
                        <div class="pull-left pord-totalcom">累计评价：<span class="commentNum">48</span></div>
                    </div>-->
                    <div id="blk_detail_main_btn">
                        <form action="" th:action="@{/cart/add}" method="post">
                            <input type="hidden" name="id" th:value="${item.id}">
                            <div class="mt10 pord-num clearfix">
                                <label class="pull-left pt10">数量</label>
                                <div class="pull-left ml42">
                                    <a href="javascript:;" id="js-buy-min"
                                       class="pull-left num-plus numbtn num-plus btn_detail_main_buy_min"><i
                                            class="ico-detail">-</i></a>
                                    <input name="count" type="text" size="2" maxlength="3" stock_num="728" limit_num="30" id="js-buy-num"
                                           class="fl nummidbtn num inpt_detail_main_buy_num" value="1">
                                    <a href="javascript:;" id="js-buy-plus"
                                       class="pull-left numbtn num-minus btn_detail_main_buy_plus"><i
                                            class="ico-detail">+</i></a>
                                </div>
                                <span class="pord-stock" th:text="'（库存：'+${item.num}+'）'">（库存：888）</span>
                            </div>
                            <div class="pord-btn clearfix">
                                <button type="submit" id="btn_detail_cart_add" class="fl joincart-btn">加入购物车</button>
                                <button type="submit" id="btn_detail_cart_buy" class="fl ml30 buy-btn">立即购买</button>
                                <a href="javascript:;" class="fl btn-collect">
                                    <i class="ico-detail ico-collect"></i>
                                    <span>收藏</span>
                                </a>
                                <a href="javascript:;" class="fl btn-collected" style="display: none">
                                    <i class="ico-detail ico-collect"></i>
                                    <span>已收藏</span>
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 col-xs-12">
                    <div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
                        <ul id="myTabs" class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                                <a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home"
                                   aria-expanded="true">商品介绍</a>
                            </li>
                            <li role="presentation">
                                <a href="#profile" role="tab" id="profile-tab" data-toggle="tab"
                                   aria-controls="profile">商品评论</a>
                            </li>
                        </ul>
                        <div id="myTabContent" class="tab-content ">
                            <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">
                                <img class="img-responsive center-block" th:src="@{'/upload/'+${item.idesc}}" src="img/info1.jpg"/>
                            </div>
                            <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="#">
                                            <img class="media-object" th:src="@{/img/g.jpg}" src="img/g.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">商品评分</h4> 非常不错啊！！！
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--底部-->
<footer th:replace="footer::footer"></footer>
</body>
    <script th:inline="javascript">
        //操作数量的方法
        $(function () {
            //获取商品的库存
            var num = [[${item.num}]];
            //获取显示数量的控件
            var $buyNum = $("#js-buy-num")

            //给 - 按钮绑定事件
            $("#js-buy-min").click(function () {
                //点击时数量-1
                var buyNum =  Number($buyNum.val());
                if(buyNum>1){
                    buyNum-=1;
                    $buyNum.val(buyNum);
                }
            });

            //给 + 按钮绑定事件
            $("#js-buy-plus").click(function () {
                //点击时数量+1
                var buyNum = Number($buyNum.val());
                if(buyNum<num){
                    buyNum+=1;
                    $buyNum.val(buyNum);
                }else{
                    $buyNum.val(num);
                }
            });
        })

    </script>
</html>